<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>修理</title>
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/bootstrap.min.css">
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery.min.js"></script>
		<style>
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">课程</h1>
		</header>

		<div class="mui-content" style="background: #FFFFFF;">
			<div class="container">
				<h2 id="courseName">课程名</h2>
				<hr>
				<div class="mui-row">
					<div class="mui-col-xs-4" onclick="go1()">
						<div style="margin: 10px;text-align: center;">
							<img src="../image/member.png" style="height: 30px; width:30px;">
							<br>成员管理
						</div>
					</div>
					<div class="mui-col-xs-4" onclick="go2()">
						<div style="margin: 10px;text-align: center;">
							<img src="../image/discuss.png" style="height: 30px; width:30px;">
							<br>讨论区
						</div>
					</div>
					<div class="mui-col-xs-4" onclick="go3()">
						<div style="margin: 10px;text-align: center;">
							<img src="../image/manage.png" style="height: 30px; width:30px;">
							<br>设置
						</div>
					</div>
				</div>
				<hr>
				<h3>教学日志 <a href="#add">+</a></h3>
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item" href="#item1mobile" id="a1">课堂</a>
					<a class="mui-control-item" href="#item2mobile" id="a2">公告</a>
				</div>

				<div id="item1mobile" class="mui-slider-item mui-control-content" style="overflow: auto;">
					<!-- ----------------------------数据填充------------------------------------- -->
					<!-- <div class="mui-card">
						<div class="mui-card-header">6月19日 星期三</div>
						<div class="mui-card-content">
							<div class="mui-card-content-inner">第四章</div>
						</div>
					</div>
					<div class="mui-card">
						<div class="mui-card-header">6月19日 星期三</div>
						<div class="mui-card-content">
							<div class="mui-card-content-inner">第四章</div>
						</div>
					</div> -->
					<!-- ----------------------------数据填充------------------------------------- -->
				</div>

				<div id="item2mobile" class="mui-slider-item mui-control-content"  style="overflow: auto;">
					<!-- ----------------------------数据填充------------------------------------- -->
					<!-- <div class="mui-card">
						<div class="mui-card-header">6月19日 星期三</div>
						<div class="mui-card-content">
							<div class="mui-card-content-inner">公告</div>
						</div>
					</div> -->
					<!-- ----------------------------数据填充------------------------------------- -->
				</div>
			</div>

		</div>
		<!--actionsheet-->
		<div id="add" class="mui-popover mui-popover-action mui-popover-bottom">
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#" onclick="createCourse()">现在上课</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#" onclick="startAnn()">发布公告</a>
				</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#add"><b>取消</b></a>
				</li>
			</ul>
		</div>

		<script>
			mui.init({
				swipeBack: false
			});
			(function($) {
				var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if (this.checked) {
						sliderSegmentedControl.className =
							'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
						//force repaint
						sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
					}
				});
			})(mui);

			var uID, cID;
			mui.plusReady(function() {
				cID = plus.webview.currentWebview().cID;
				uID = plus.storage.getItem('uID');
				init();
			})

			//初始化数据,获得课堂信息,公告信息
			function init() {
				getCourseName();
				getCourseLogs();
				getCourseAnns();
			}

			function getCourseName() {
				mui.ajax({
					url: 'http://120.27.247.180:8080/School/course/queryCourseByCID',
					type: "post",
					data: {
						"cID": cID
					},
					dataType: "jsonp",
					contentType: "application/x-www-form-urlencoded; charset=utf-8",
					jsonp: "jsoncallback",
					success: function(data) {
						data = JSON.parse(data);
						var courseName = jQuery("#courseName");
						courseName.text(data.course['cName']);
					},
					error: function() {
						mui.toast("获取课程名失败");
					}
				});
			}

			function getCourseLogs() {
				mui.ajax({
					url: 'http://120.27.247.180:8080/School/course/queryCourseLogs',
					type: "post",
					data: {
						"cID": cID
					},
					dataType: "jsonp",
					contentType: "application/x-www-form-urlencoded; charset=utf-8",
					jsonp: "jsoncallback",
					success: function(data) {
						data = JSON.parse(data);
						//获得课堂信息
						var courseEle = jQuery("#item1mobile");
						courseEle.empty();
						var courseInfo = data.list;
						for (var i = 0, l = courseInfo.length; i < l; i++) {
							var date = new Date(courseInfo[i]['logTime']);
							var time = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
							var tempEle = '<div class="mui-card">' +
								'<div class="mui-card-header">' + time + '</div>' +
								'<div class="mui-card-content">' +
								'<div class="mui-card-content-inner">' + courseInfo[i]['description'] + '</div>' +
								'</div>';
							courseEle.append(tempEle);
						}
					},
					error: function() {
						mui.toast("获取历史课程信息失败");
					}
				});
			}

			function getCourseAnns() {
				mui.ajax({
					url: 'http://120.27.247.180:8080/School/ann/queryAnnBycID',
					type: "post",
					data: {
						"cID": cID
					},
					dataType: "jsonp",
					contentType: "application/x-www-form-urlencoded; charset=utf-8",
					jsonp: "jsoncallback",
					success: function(data) {
						data = JSON.parse(data);
						//获得公告信息
						var annEle = jQuery("#item2mobile");
						annEle.empty();
						var annInfo = data.list;
						for (var i = 0, l = annInfo.length; i < l; i++) {
							var date = new Date(annInfo[i]['issueTime']);
							var time = date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
							var tempEle = '<div class="mui-card">' +
								'<div class="mui-card-header">' + time + '</div>' +
								'<div class="mui-card-content">' +
								'<div class="mui-card-content-inner">' + annInfo[i]['title'] + '</div>' +
								'</div>';
							annEle.append(tempEle);
						}
					},
					error: function() {
						mui.toast("获取历史公告信息失败");
					}
				});
			}



			//打开管理成员
			function go1() {
				mui.openWindow({
					url: 'member_manage.html',
					extras: {
						'cID': cID
					}
				});
			}

			//打开讨论
			function go2() {
				mui.openWindow({
					url: 'discussion.html',
					extras: {
						'cID': cID
					}
				});
			}

			//打开课程信息管理
			function go3() {
				mui.openWindow({
					url: 'course_manage.html',
					extras: {
						'cID': cID
					}
				});
			}

			//发布公告
			function startAnn() {
				var btnArray = ['取消', '确定'];
				mui.prompt('发布公告：', '', '提示', btnArray, function(e) {
					if (e.index == 1) {
						mui.ajax({
							url: 'http://120.27.247.180:8080/School/ann/announce',
							type: "post",
							data: {
								"cID": cID,
								"title": e.value
							},
							dataType: "jsonp",
							contentType: "application/x-www-form-urlencoded; charset=utf-8",
							jsonp: "jsoncallback",
							success: function(data) {
								data = JSON.parse(data);
								if (data['suc'])
									mui.alert('发布成功', '提示', function() {
										getCourseAnns();
									});
								else
									mui.toast("发布失败");
							},
							error: function() {
								mui.toast("服务器异常，请稍后再试");
							}
						});
					}
				});
			}

			//现在上课
			function createCourse() {
				var btnArray = ['取消', '确定'];
				mui.prompt('输入上课主要内容：', '', '提示', btnArray, function(e) {
					if (e.index == 1) {
						var title = e.value;
						mui.openWindow({
							'url': 'create_course.html',
							extras: {
								'description': title,
								'cID': cID
							}
						});
					}
				});
			}
			
			document.getElementById("a1").addEventListener('tap',function(){
				getCourseLogs();
			});
			document.getElementById("a2").addEventListener('tap',function(){
				getCourseAnns();
			});
			
		</script>
	</body>
</html>
